<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="130px"
      label-position="left"
    >
      <el-form-item label="模块类型:" prop="type">
        <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="(item, val) in modelList"
            :key="val"
            :label="item"
            :value="val"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 轮播抽奖 现金抽奖 今日奖品 -->
      <!-- <template v-if="form.type == 1 || form.type == 2 || form.type == 3|| form.type == 4|| form.type == 5"> -->
      <el-form-item label="场次:" prop="is_round">
        <el-select
          v-model="form.is_round"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序:" prop="level">
        <el-input-number
          v-model="form.level"
          :min="0"
          :max="100"
          placeholder="排序"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="名称:" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item
        label="消耗积分:"
        prop="score"
        v-if="form.type == 4 || form.type == 6"
      >
        <el-input v-model="form.score" placeholder="消耗积分" type="number" />
      </el-form-item>
      <el-form-item label="展示时间段:" prop="time">
        <el-date-picker
          style="width: 100%"
          v-model="form.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="form.type == 1" label="轮播图切换时间:" prop="times">
        <el-input
          v-model="form.times"
          placeholder="请输入"
          type="number"
          style="width: 90%"
        />
        秒
      </el-form-item>
      <el-form-item
        label="上新时间:"
        v-if="form.type == 2 || form.type == 3"
        prop="hours"
      >
        <el-input-number
          v-model="form.hours"
          :min="0"
          :max="23"
          placeholder="上新时间"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="任务数量上限:" prop="task_num">
        <el-input
          v-model="form.task_num"
          placeholder="请输入任务数量上限"
          type="number"
        />
      </el-form-item>
      <el-form-item label="链接:" prop="url">
        <el-input v-model="form.url" placeholder="请输入链接" />
      </el-form-item>
      <el-form-item label="图片:" prop="photo">
        <el-input
          v-model="form.photo"
          readonly
          placeholder="请上传图片"
          style="width: calc(100% - 70px)"
        />
        <div class="commhover inputbox ml_10">
          上传图片
          <input
            type="file"
            name=""
            class="uploadinput commhover"
            id="uploadimg"
            accept="image/*"
            @change="changeImg"
          />
        </div>
      </el-form-item>
      <el-form-item v-if="imgsrc">
        <img :src="imgsrc" alt="" class="imgurl" />
      </el-form-item>
      <el-form-item label="备注:" prop="msg">
        <el-input v-model="form.msg" type="textarea" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item v-if="form.type == 2" label="分享功能:" prop="is_btn">
        <el-radio-group v-model="form.is_btn">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type == 3" label="上首页:" prop="is_btn">
        <el-radio-group v-model="form.is_btn">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type == 5" label="提醒按钮:" prop="is_btn">
        <el-radio-group v-model="form.is_btn">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- </template> -->
    </el-form>
    <div class="flexend">
      <el-button type="primary" @click="submitForm" :loading="subloading"
        >确 定</el-button
      >
      <el-button @click="handleCloseAdd">取 消</el-button>
    </div>
  </div>
</template>
<script>
import {
  getModuleType,
  moduleCreate,
  getModuleInfo,
  moduleEdit,
} from "@/api/sethome";
import { uploadPhoto } from "@/api/comm";
import { isOverSize } from "@/utils/validate";
export default {
  data() {
    return {
      modelList: {},
      options: [
        { label: "单场次", value: 0 },
        { label: "多场次", value: 1 },
      ],
      imgsrc: "",
      subloading: false,
      form: {
        type: "1",
        is_round: "",
        name: "",
        level: 100,
        time: "",
        times: "",
        status: 1,
        task_num: "",
        url: "",
        photo: "",
        msg: "",
        is_btn: 1,
        hours: "",
        score: "",
      },
      // 表单校验
      rules: {
        type: [
          { required: true, message: "请选择模块类型", trigger: "change" },
        ],
        is_round: [
          { required: true, message: "请选择场次", trigger: "change" },
        ],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        level: [{ required: true, message: "排序值不能为空", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间", trigger: "change" }],
        times: [
          { required: true, message: "任务数量不能为空", trigger: "blur" },
        ],
        // status: [
        //   { required: true, message: "状态不能为空", trigger: "change" },
        // ],
        task_num: [
          { required: true, message: "活动数量限制不能为空", trigger: "blur" },
        ],
        url: [{ required: true, message: "链接不能为空", trigger: "blur" }],
        photo: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        hours: [
          { required: true, message: "上新时间不能为空", trigger: "blur" },
        ],
        score: [
          { required: true, message: "消耗积分不能为空", trigger: "blur" },
        ],
      },
    };
  },

  props: {
    rowid: {
      default: "",
    },
  },

  created() {
    this.getModuleType();
    if (this.rowid) {
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      getModuleInfo({ id: this.rowid }).then((res) => {
        // if(res.data)
        this.form = res.data;
        this.form.type = res.data.type + "";
        this.imgsrc = this.form.photo
        this.form.time = [res.data.start_time, res.data.end_time];
        if (res.data.more && !Array.isArray(res.data.more)) {
          this.form.times = Number(res.data.more.times);
          this.form.score = res.data.more.score
          this.form.hours = res.data.more.hours
          this.form.is_btn = Number(res.data.more.is_btn)
        }
      });
    },

    getModuleType() {
      getModuleType().then((res) => {
        this.modelList = res.data;
      });
    },

    // 上传图片
    changeImg(event) {
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", "bg");
      uploadPhoto(formData).then((res) => {
        if (res.code == 1) {
          this.$message.success("上传成功");
          this.imgsrc = process.env.VUE_APP_BASE_API + "/" + res.data;
          this.form.photo = process.env.VUE_APP_BASE_API + "/" + res.data;
          document.getElementById("uploadimg").value = null;
        }
      });
    },

    paramsTrafer() {
      // let params = {};
      // if(this.form.type < 5){
      let params = {
        type: this.form.type,
        is_round: this.form.is_round,
        name: this.form.name,
        level: this.form.level,
        status: this.form.status,
        task_num: this.form.task_num,
        url: this.form.url,
        photo: this.form.photo,
        msg: this.form.msg,
        start: this.form.time[0],
        end: this.form.time[1],
        //   };
      };
      if (this.form.type == 1) {
        params.times = this.form.times;
      }
      if (this.form.type == 2 || this.form.type == 3) {
        params.is_btn = this.form.is_btn;
        params.hours = this.form.hours;
      }
      if (this.form.type == 4 || this.form.type == 6) {
        params.score = this.form.score;
      }
      if (this.form.type == 5) {
        params.is_btn = this.form.is_btn;
      }
      return params;
    },

    submitForm() {
      console.log('rowid:',this.rowid)
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.subloading = true;
        let params = this.paramsTrafer();
        if (this.rowid) {
          moduleEdit({ ...params, id: this.rowid }).then((res) => {
            this.$message.success("编辑成功");
            this.$emit("close", 1);
            this.subloading = false;
          }).catch(()=>{
            this.subloading = false;
          })
        } else {
          moduleCreate(params).then((res) => {
            this.$message.success("添加成功");
            this.$emit("close", 1);
            this.subloading = false;
          }).catch(()=>{
            this.subloading = false;
          })
        }
      });
    },

    handleCloseAdd() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.inputbox {
  display: inline-block;
  width: 60px;
  background-color: #4a73ff;
  border: 1px solid #4a73ff;
  color: #fff;
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  text-align: center;
  position: relative;
}
.uploadinput {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}

.imgurl {
  width: 120px;
  height: 200px;
}
</style>
